<template>
  <div class="lab-container">
    <!-- 导航栏（保持原有顶部导航） -->
    <nav class="navbar navbar-expand-lg bg-body-tertiary border-bottom">
      <!-- 原有导航栏代码保持不变 -->
    </nav>

    <!-- 内容区域 -->
    <main class="container my-5">
      <div class="row">
        <!-- 左侧标签页 -->
        <div class="col-md-3">
          <div class="border p-3">
            <h5 class="mb-3">实验室概况</h5>
            <div class="nav flex-column nav-pills">
              <button
                v-for="(tab, index) in tabs"
                :key="index"
                class="nav-link text-start"
                :class="{ active: activeTab === index }"
                @click="activeTab = index"
              >
                {{ tab.title }}
              </button>
            </div>
          </div>
        </div>

        <!-- 右侧内容区域 -->
        <div class="col-md-9">
          <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
              <li class="breadcrumb-item">
                <router-link to="/homePage">首页</router-link>
              </li>
              <li class="breadcrumb-item">
                <router-link to="/laboratoryOverview">实验室概况</router-link>
              </li>
              <li class="breadcrumb-item active">
                {{ tabs[activeTab].title }}
              </li>
            </ol>
          </nav>

          <div class="content-box border p-4">
            <!-- 动态内容区域 -->
            <template v-if="activeTab === 0">
              <h3 class="mb-4">实验室简介</h3>
              <!-- 横线 -->
              <div class="custom-divider my-4"></div>
              <p class="lh-lg" v-html="tabs[0].content"></p>
            </template>

            <template v-if="activeTab === 1">
              <h3 class="mb-4">组织结构</h3>
              <!-- 横线 -->
              <div class="custom-divider my-4"></div>
              <p>实验室组织结构如下图所示。</p>
              <img
                :src="organization.src"
                alt="组织结构图"
                class="img-fluid d-block mx-auto"
              />
            </template>

            <template v-if="activeTab === 2">
              <h3 class="mb-4">联系我们</h3>
              <!-- 横线 -->
              <div class="custom-divider my-4"></div>
              <p class="card-text" v-html="getHelp"></p>
            </template>
            <template v-if="activeTab === 3">
              <h3 class="mb-4">logo下载</h3>
              <!-- 横线 -->
              <div class="custom-divider my-4"></div>
            </template>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script setup>
import { ref } from "vue";
const activeTab = ref(0);

const tabs = ref([
  {
    title: "实验室简介",
    content: `先进材料教育部重点实验室由原国家教委于1993年12月批准、
    在中国工程院院士李恒德先生的领导下在清华大学建设，原名先进材料开放实验室。
    实验室于1995年正式对外开放，1999年9月更名为先进材料教育部重点实验室。
    <img src="${require("@/assets/images/school.png")}" alt="动态图片" class="img-fluid">
    1999年获得985工程重点支持，2003年获得重点实验室运行经费的支持。
    1998年、2002年、2007年、2012年和2018年参加教育部重点实验室评估,
    评估结果均为“优秀”。目前实验室所属的材料学、材料物理与化学、
    核燃料循环与材料和凝聚态物理均被评为全国重点学科。实验室现已成为多学科
    交叉的先进材料研究平台和基地。`,
  },
  {
    title: "组织结构",
    content: "组织结构内容",
  },
  {
    title: "联系我们",
    content: "",
  },
  {
    title: "logo下载",
    content: "logo下载内容",
  },
]);

// 组织结构
const organization = {
  src: require("@/assets/images/组织结构.png"),
};

// 联系我们
const getHelp = "内容";
</script>

<style scoped>
.nav-link,
.nav-link:hover {
  color: var(--site-color);
}
li > a {
  color: var(--site-color);
}
.nav-pills .nav-link {
  border-radius: 0.25rem;
  margin-bottom: 0.5rem;
  transition: all 0.3s ease;
}

.nav-pills .nav-link.active {
  background-color: var(--site-color);
  color: white !important;
}
p {
  font-size: 1.25rem;
}
.content-box {
  min-height: 600px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
/* 标签页栏目内横线 */
.custom-divider {
  height: 2px;
  background-color: var(--site-color);
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
}
</style>